<template>
    <page-header-wrapper>
        <a-card :bordered="false">
            <div class="table-page-search-wrapper">
                <a-form layout="inline">
                    <a-row :gutter="48">
                        <a-col :md="8" :sm="24">
                            <a-form-item label="名字">
                                <a-input v-model="queryParam.name" placeholder="" allow-clear/>
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="24">
                            <a-form-item label="描述">
                                <a-input  v-model="queryParam.description" placeholder="" allow-clear/>
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="24">
                            <a-form-item label="时间区间">
                                <a-range-picker v-model="queryParam.created_at_range">
                                    <template slot="dateRender" slot-scope="current">
                                        <div class="ant-calendar-date" :style="getCurrentStyle(current)">
                                            {{ current.date() }}
                                        </div>
                                    </template>
                                </a-range-picker>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="48">
                        <a-col :md="!advanced && 8 || 24" :sm="24">
                            <span
                                  class = "table-page-search-submitButtons"
                                  :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                            <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                            <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>
                          </span>
                        </a-col>
                    </a-row>
                </a-form>
            </div>

            <div class="table-operator">
                <a-button type="primary" icon="plus" @click="typeHandleAdd">新建</a-button>
                <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
                    <a-menu slot="overlay">
                        <a-menu-item  @click="typeHandleDelete"  key="1"><a-icon type="delete"/>删除</a-menu-item>
                        <!-- lock | unlock -->
<!--                        <a-menu-item key="2"><a-icon type="lock" @click="typeHandleLock" />锁定</a-menu-item>-->
                    </a-menu>
                    <a-button style="margin-left: 8px">
                        批量操作
                        <a-icon type="down"/>
                    </a-button>
                </a-dropdown>
            </div>

            <s-table
                    ref="table"
                    size="default"
                    rowKey="id"
                    :columns="columns"
                    :data="loadData"
                    :alert="true"
                    :rowSelection="rowSelection"
                    showPagination="true"
            >
<!--                图片列表-->
                <avatar-list size="large" slot="icon" slot-scope="text">
                    <template v-for="(column,index) in JSON.parse(text)">
                        <!--              @click.native能够防止点击事件不触发-->
                        <avatar-list-item v-bind:key="index" :src="column"/>
                        <span v-bind:key="index"/>
                    </template>
                </avatar-list>
<!--                选项添加-->
                <a-tooltip  slot="question_type_options_str" slot-scope="text, record, index" :title="text">
                    <template>
                        <a @click="optionHandleAdd(record)" style="margin-left: 8px;cursor:pointer">
                            {{ text?text:"(请点击添加+)" }}
                        </a>
                    </template>
                </a-tooltip>
<!--                操作-->
                <span slot="action" slot-scope="text, record">
                  <template>
                    <a @click="typeHandleEdit(record)">修改</a>
                    <a-divider type="vertical" />
                  </template>
                </span>
            </s-table>

            <create-type-form
                    ref="typeCreateModal"
                    :visible="typeVisible"
                    :loading="typeConfirmLoading"
                    :model="typeCreateModal"
                    @cancel="typeHandleCancel"
                    @ok="typeHandleOk"
            />
            <step-by-step-modal ref="modal" @ok="handleOk"/>

        </a-card>
    </page-header-wrapper>
</template>

<script>
    import moment from 'moment'
    import { STable, Ellipsis } from '@/components'
    import { questionTypeList } from '@/api/questionType'

    import StepByStepModal from '../list/modules/StepByStepModal'
    import CreateTypeForm from './modules/CreateTypeForm'
    import AvatarList from "../../components/AvatarList/List";
    import { questionTypeDelete, questionTypeSave } from "../../api/questionType";

    const AvatarListItem = AvatarList.AvatarItem

    const columns = [
        {
            title: '名字',
            dataIndex: 'name',
        },
        {
            title: '描述',
            dataIndex: 'description',
            ellipsis: true, // 太长自动省略
        },
        {
            title: '图标',
            dataIndex: 'icon',
            scopedSlots: { customRender: 'icon' },
        },
        {
            title: '选项（点击添加/修改）',
            dataIndex: 'question_type_options_str',
            scopedSlots: { customRender: 'question_type_options_str' },
        },
        {
            title: '创建时间',
            dataIndex: 'created_at',
            sorter: true
        },
        {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            scopedSlots: { customRender: 'action' }
        }
    ]
    const typeCreateModal = {// 新增的类型模型
        id: 0,
        name: '',
        description: '',
        icon: '',
    }
    export default {
        name: 'QuestionTypeList',
        components: {
            AvatarList,
            STable,
            Ellipsis,
            CreateTypeForm,
            StepByStepModal,
            AvatarListItem
        },
        filters: {
            iconFilter(text) {
                const temp = JSON.parse(text)
                if (temp.length) {
                    return temp[0]
                }
                return text
            }
        },
        data() {
            this.columns = columns
            return {
                // create model
                typeVisible: false,
                typeConfirmLoading: false,
                typeCreateModal: typeCreateModal,
                // 高级搜索 展开/关闭
                advanced: false,
                // 查询参数
                queryParam: {},
                // 加载数据方法 必须为 Promise 对象
                loadData: parameter => {
                    const requestParameters = Object.assign({}, parameter, this.queryParam)
                    return questionTypeList(requestParameters)
                        .then(res => {
                            return res.data
                        })
                },
                selectedRowKeys: [],
                selectedRows: []
            }
        },
        created() {
        },
        computed: {
            rowSelection() {
                return {
                    selectedRowKeys: this.selectedRowKeys,
                    onChange: this.onSelectChange
                }
            }
        },
        methods: {
            tableInit() { // 表格初始化
                this.$refs.table.refresh()
                this.$refs.table.clearSelected()
            },
            typeHandleAdd() {
                this.typeCreateModal = typeCreateModal
                this.typeVisible = true
            },
            typeHandleDelete() { // 删除
                questionTypeDelete({ ids: this.selectedRowKeys })
                    .then((res)=> {
                        if (res.code > 0) {
                            this.$message.success(res.data)
                            this.tableInit()
                        }else{
                            this.$message.error(res.data)
                        }
                    }).catch((err)=> {
                    console.log(err)
                });
            },
            typeHandleEdit(record) {
                this.typeVisible = true
                this.typeCreateModal = { ...record }
            },
            typeHandleCancel() {
                this.typeVisible = false
                const form = this.$refs.typeCreateModal.form
                form.resetFields() // 清理表单数据（可不做）
            },
            typeHandleOk(e) { // 新增，修改
                this.typeConfirmLoading = true;
                questionTypeSave(this.$refs.typeCreateModal.model)
                    .then((res)=> {
                        if (res.code > 0) {
                            this.typeVisible = false
                            this.$message.success(res.data)
                            this.tableInit()
                        }else{
                            this.$message.error(res.data)
                        }
                        this.typeConfirmLoading = false;
                    }).catch((err)=> {
                    this.typeConfirmLoading = false;
                    console.log(err)
                });
            },
            optionHandleAdd(record) {
                this.$router.push({ path: '/questionTypeOption/list', query: { question_type_id: record.id } } ) // 传递id过去
            },
            getCurrentStyle(current, today) {
                const style = {};
                if (current.date() === 1) {
                    style.border = '1px solid #1890ff';
                    style.borderRadius = '50%';
                }
                return style;
            },
            onSelectChange(selectedRowKeys, selectedRows) {
                this.selectedRowKeys = selectedRowKeys
                this.selectedRows = selectedRows
            },
            toggleAdvanced() {
                this.advanced = !this.advanced
            },
            resetSearchForm() {
                this.queryParam = {
                    date: moment(new Date())
                }
            }
        }
    }
</script>
